<template>
  <div>
    <Row :gutter="20">
      <Col :xs="24" :sm="24" :md="12" :lg="6" v-for="(infor, i) in inforCardData" :key="`infor-${i}`" style="height: 120px; margin-bottom: 20px;">
        <infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36">
          <count-to :end="infor.count" :count-class="'count-style'"/>
          <p>{{ infor.title }}</p>
        </infor-card>
      </Col>
    </Row>
    <Row :gutter="20">
      <Col :xs="24" :sm="24" :md="12" :lg="12" style="margin-bottom: 20px;">
        <Card shadow>
          <chart-pie style="height: 300px;" :value="pie.data.expType" :text="'实验项目类型'" :subtext="'总数 ：' + expTotal" :series-text="'实验项目类型'"></chart-pie>
        </Card>
      </Col>
      <Col :xs="24" :sm="24" :md="12" :lg="12" style="margin-bottom: 20px;">
        <Card shadow>
          <chart-pie style="height: 300px;" :value="pie.data.formType" :text="'申请表类型'" :subtext="'总数 ：' + formTotal" :series-text="'申请表类型'"></chart-pie>
        </Card>
      </Col>
    </Row>
    <Row :gutter="20">
      <Col :xs="24" :sm="24" :md="12" :lg="12" style="margin-bottom: 20px;">
        <Card shadow>
          <chart-pie style="height: 300px;" :value="pie.data.labStatus" :text="'实验室情况'" :subtext="'总数 ：' + labTotal" :series-text="'实验室情况'"></chart-pie>
        </Card>
      </Col>
      <Col :xs="24" :sm="24" :md="12" :lg="12" style="margin-bottom: 20px;">
        <Card shadow>
          <chart-pie style="height: 300px;" :value="pie.data.userType" :text="'用户类型'" :subtext="'总数 ：' + userTotal" :series-text="'用户类型'"></chart-pie>
        </Card>
      </Col>
    </Row>
    <!-- <Row>
      <Card shadow>
        <example style="height: 310px;"/>
      </Card>
    </Row> -->
    <Row>
      <Card shadow>
        <div style="width: 240px; position: absolute; right: 40px; z-index: 10;">
          <Select :size="selectSize"
                  v-model="filter.institute"
                  :enabledPreventOverflow="enabledPreventOverflow"
                  placeholder="请选择学院进行检索"
                  filterable
                  clearable>
            <Option v-for="(item, index) in institutes" :value="item" :key="index">{{ item }}</Option>
          </Select>
        </div>
        <chart-bar style="height: 450px;" :value="bar.value" :legend="bar.legend" :text="bar.title"></chart-bar>
      </Card>
    </Row>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { getLabData, getAppliedFormData, getUserIdentityData, getExpItemTypeData, getInstituteList, getExpDataInActiveLab } from '@/api/home'
import InforCard from '_c/info-card'
import CountTo from '_c/count-to'
import { ChartPie, ChartBar } from '_c/charts'
import Example from './example.vue'
export default {
  name: 'home',
  components: {
    InforCard,
    CountTo,
    ChartPie,
    ChartBar,
    Example
  },
  data () {
    return {
      expTotal: 0,
      formTotal: 0,
      userTotal: 0,
      labTotal: 0,
      selectSize: 'default',
      enabledPreventOverflow: false,
      filter: {
        institute: ''
      },
      institutes: [],
      inforCardData: [{
        title: '新增用户',
        icon: 'md-person-add',
        count: 0,
        color: '#2d8cf0'
      }, {
        title: '申请表',
        icon: 'md-paper',
        count: 0,
        color: '#19be6b'
      }, {
        title: '综合性和设计性实验',
        icon: 'md-bookmarks',
        count: 0,
        color: '#E46CBB'
      }, {
        title: '实验室',
        icon: 'ios-desktop',
        count: 0,
        color: '#9A66E4'
      }],
      pie: {
        data: {
          userType: [],
          expType: [],
          formType: [],
          labStatus: []
        }
      },
      bar: {
        value: [],
        title: '各实验室的实验项目数和人时数分布情况',
        legend: {
          data: [{
            key: 'expItemNum',
            value: '实验项目数'
          }, {
            key: 'personHourNum',
            value: '人时数'
          }]
        }
      },
      barData: {
        Mon: 13253,
        Tue: 34235,
        Wed: 26321,
        Thu: 12340,
        Fri: 24643,
        Sat: 1322,
        Sun: 1324
      },
      userType: {
        'Student': '学生',
        'Teacher': '教师',
        'Other': '临时',
        'Assistant': '学生助理'
      }
    }
  },
  methods: {
    ...mapActions([
      'getUserInfo'
    ])
  },
  created () {
    this.$Notice.config({
      top: window.innerHeight / 3
    })
    // 获取用户的数量和身份类型
    getUserIdentityData().then(response => {
      let res = response.data
      if (res.code === 1) {
        if (res.data && res.data.length > 0) {
          let sum = 0
          this.pie.data.userType = res.data.map(item => {
            sum += item.number
            return {
              value: item.number,
              name: this.userType[item.identity]
            }
          })
          this.inforCardData[0].count = sum
          this.userTotal = sum
        } else {
          this.inforCardData[0].count = 0
          this.userTotal = 0
          this.pie.data.userType = []
        }
      } else {
        this.inforCardData[0].count = 0
        this.userTotal = 0
        this.pie.data.userType = []
        this.$Notice.error({
          title: '获取数据失败',
          desc: '获取用户身份类型和数量失败！' + res.info
        })
      }
    }).catch(error => {
      console.log(error)
      this.inforCardData[0].count = 0
      this.userTotal = 0
      this.pie.data.userType = []
      this.$Notice.error({
        title: '获取数据失败',
        desc: '获取用户身份类型和数量失败！'
      })
    })
    // 获取申请表的类型和数量
    getAppliedFormData().then(response => {
      let res = response.data
      if (res.code === 1) {
        if (res.data && res.data.length > 0) {
          let sum = 0
          this.pie.data.formType = res.data.map(item => {
            sum += item.number
            return {
              value: item.number,
              name: item.type === 'COURSE' ? '普通实验' : '实训'
            }
          })
          this.formTotal = sum
          this.inforCardData[1].count = sum
        } else {
          this.inforCardData[1].count = 0
          this.formTotal = 0
          this.pie.data.formType = []
        }
      } else {
        this.inforCardData[1].count = 0
        this.formTotal = 0
        this.pie.data.formType = []
        this.$Notice.error({
          title: '获取数据失败',
          desc: '获取申请表类型和数量失败！' + res.info
        })
      }
    }).catch(error => {
      console.log(error)
      this.inforCardData[1].count = 0
      this.formTotal = 0
      this.pie.data.formType = []
      this.$Notice.error({
        title: '获取数据失败',
        desc: '获取申请表类型和数量失败！'
      })
    })
    // 获取实验项目的类型和数量
    getExpItemTypeData().then(response => {
      let res = response.data
      if (res.code === 1) {
        if (res.data && res.data.length > 0) {
          let sum = 0
          let total = 0
          this.pie.data.expType = res.data.map(item => {
            if (item.type === '综合性' || item.type === '设计性') {
              sum += item.number
            }
            total += item.number
            return {
              value: item.number,
              name: item.type
            }
          })
          this.expTotal = total
          this.inforCardData[2].count = sum
        } else {
          this.expTotal = 0
          this.inforCardData[2].count = 0
          this.pie.data.expType = []
        }
      } else {
        this.expTotal = 0
        this.inforCardData[2].count = 0
        this.pie.data.expType = []
        this.$Notice.error({
          title: '获取数据失败',
          desc: '获取实验项目类型和数量失败！' + res.info
        })
      }
    }).catch(error => {
      console.log(error)
      this.inforCardData[2].count = 0
      this.expTotal = 0
      this.pie.data.formType = []
      this.$Notice.error({
        title: '获取数据失败',
        desc: '获取实验项目类型和数量失败！'
      })
    })
    // 获取实验室的数量和启用/禁用情况
    getLabData().then(response => {
      let res = response.data
      if (res.code === 1) {
        if (res.data && res.data.length > 0) {
          let sum = 0
          this.pie.data.labStatus = res.data.map(item => {
            sum += item.number
            return {
              value: item.number,
              name: item.status === 'ACTIVATING' ? '可用' : '禁用'
            }
          })
          this.inforCardData[3].count = sum
          this.labTotal = sum
        } else {
          this.inforCardData[3].count = 0
          this.labTotal = 0
          this.pie.data.labStatus = []
        }
      } else {
        this.inforCardData[3].count = 0
        this.labTotal = 0
        this.pie.data.labStatus = []
        this.$Notice.error({
          title: '获取数据失败',
          desc: '获取实验室数量和状态失败！' + res.info
        })
      }
    }).catch(error => {
      console.log(error)
      this.inforCardData[3].count = 0
      this.labTotal = 0
      this.pie.data.labStatus = []
      this.$Notice.error({
        title: '获取数据失败',
        desc: '获取实验室数量和状态失败！'
      })
    })
    // 获取用户信息
    this.getUserInfo().then(response => {
      let res = response.data
      if (res.code === 1) {
        res = res.data
        this.filter.institute = res.department || ''
      } else {
        this.$Notice.error({
          title: '获取信息失败',
          desc: '获取用户信息失败！' + res.info
        })
      }
    }).catch(err => {
      this.$Notice.error({
        title: '获取信息失败',
        desc: '获取用户信息失败！'
      })
      console.log(err)
    })
    // 获取所有学院
    getInstituteList().then(response => {
      let res = response.data
      if (res.code === 1) {
        this.institutes = res.data.length > 0 ? res.data : []
      } else {
        this.$Notice.error({
          title: '获取列表失败',
          desc: '获取学院列表失败！' + res.info
        })
      }
    }).catch(err => {
      this.$Notice.error({
        title: '获取列表失败',
        desc: '获取学院列表失败！'
      })
      console.log(err)
    })
  },
  mounted () {
    //
  },
  beforeDestroy () {
    this.$Notice.destroy()
  },
  watch: {
    'filter.institute': {
      handler: function (value) {
        if (value) {
          getExpDataInActiveLab(value).then(response => {
            let res = response.data
            if (res.code === 1) {
              this.bar.value = res.data.length > 0 ? res.data : []
            } else {
              this.$Notice.error({
                title: '获取数据失败',
                desc: '获取实验室的实验项目数和人时数失败！' + res.info
              })
            }
          }).catch(err => {
            this.$Notice.error({
              title: '获取数据失败',
              desc: '获取实验室的实验项目数和人时数失败！'
            })
            console.log(err)
          })
        }
      }
    }
  }
}
</script>

<style lang="less">
.count-style{
  font-size: 50px;
}
</style>
